<template>
  <view class="page">
		<!-- header 开始 -->
		<view class="header">
			<!-- locationName 开始 -->
			<view class="locationName">
				<uni-icons type="home-filled" size="18" color="blue"></uni-icons>
				<text>河北</text>
			</view>
			<!-- locationName 结束 -->
			<!-- 搜索框开始 -->
			<view class="uni-search-bar">
				<uni-search-bar placeholder="搜索医生或科室" cancel-button="none" radius="100"/>
			</view>
			<!-- 搜索框结束 -->
		</view>
		<!-- header 结束 -->
		<view class="classify_wrap">
				  <view class="classify_scroll_x">
				    <scroll-view scroll-x="true" >
				      <view class="segmented-wrap">
				        <uni-segmented-control :current="current" :values="classify" @clickItem="onClickItem" styleType="text" activeColor="#CC0000"></uni-segmented-control>
				      </view>
				    </scroll-view>
				  </view>
				  <view class="classify_icon">
				  	<uni-icons type="list" size="28" color="gray"></uni-icons>
				  </view>
				  			<!-- 分类 icon 结束 -->
				  		</view>
				<view class="uni-margin-wrap">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner">
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
								:duration="duration">
								<swiper-item v-for="(item, index) in data" :key="item._id">
									<view class="swiper-item">
										<image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="false" />
									</view>
								</swiper-item>
							</swiper>
						</view>
					</unicloud-db>
				</view>
								
						<view class="content">
							<view v-if="current === 0">
										<view class="vip-wrap">
											<uni-card title="医保权益" :thumbnail="vipIcon" margin="5px">
												<uni-grid :column="column" :show-border="false" :square="false">
													<uni-grid-item v-for="(item, index) in vipItem">
														<view class="grid-item-box">
															<image :src="item.icon" style="width: 60rpx; height: 60rpx;" mode="aspectFill"></image>
															<text>{{ item.text }}</text>
														</view>
													</uni-grid-item>
												</uni-grid>
											</uni-card>
										</view>	
													<!-- 书籍列表开始 -->
													<view class="bookList">
																	<!-- 书籍列表开始 -->
																	<view class="bookList">
																	<unicloud-db v-slot:default="{data, loading, error, options}" collection="sunbook">
																		<view v-if="error">{{error.message}}</view>
																		<view v-else>
																			<uni-list>
																				<uni-list-item v-for="(item, index) in data" :title="item.bookName" :note="item.author">
																						<template v-slot:header>
																							<view class="slot-box">
																								<image class="slot-image" :src="item.coverImage
																								.url" mode="widtnFix"></image>
																							</view>
																						</template>
																				</uni-list-item>
																			</uni-list>
																		</view>
																	</unicloud-db>
																	</view>
																	<!-- 书籍列表结束 -->
													</view>
													<!-- 书籍列表结束 -->
							</view>
							<view v-if="current === 1">
								内科医生 **常见专科**：心血管内科、消化内科、呼吸内科、内分泌科等
								
								外科医生 **常见专科**：普通外科、神经外科、骨科、泌尿外科等
								
								儿科医生  **常见专科**：小儿内科、小儿外科、儿童心理科等
								
								皮肤科医生  **常见专科**：皮肤病学、美容皮肤科等
								
							</view>
							<view v-if="current === 2">
								内科
								心血管内科：心脏病、高血压、心律失常等。
								消化内科：胃炎、胃溃疡、肠炎、肝病等。
								呼吸内科：肺炎、哮喘、慢性阻塞性肺疾病等。
								内分泌科：糖尿病、甲状腺疾病、肥胖症等。
								肾内科：肾炎、肾结石、尿毒症等。
								血液内科：贫血、白血病、淋巴瘤等。
								风湿免疫科：类风湿关节炎、系统性红斑狼疮等。
								神经内科：脑血管病、癫痫、帕金森病等。

							</view>
						</view>
	</view>
</template>

<script>
  export default {
    data() {
      return {
		classify:["主页","医生","科室","疾病","就诊服务","关于","帮助","联系","反馈"],
		current: 0,
        indicatorDots: true,
		autoplay: true,
		interval: 2000,
		duration: 500,
		column: 3,
		vipIcon: '/static/vip/4.webp',
		vipItem: [
		{text: '购买医保', icon: '/static/vip/1.webp'},
		{text: '患者签到', icon: '/static/vip/2.webp'},
		{text: '领药中心', icon: '/static/vip/3.webp'}
	   ],

      }
    },
    methods: {
	  onClickItem(e) {
		if (this.current !== e.currentIndex) {
		  this.current = e.currentIndex
		}
	  },
	   goToGrid(){
	  	 uni.switchTab({
	  	   url:'/pages/grid/grid'
	  	  })
	  	},

    }
  }
</script>

<style scoped>
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
	
	.pages {
		background-color: #EEEEEE;
	}
	
	.header{
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
	}
	
	.locationName{
		display: flex;
		flex-direction: row;
		height: 50px;
		line-height: 50px;
		font-size: 12px;
	}
		.classify_scroll_x{
			white-space: nowrap;
			width: 650rpx;
			background-color: #FFFFFF;
			margin-top: 5rpx;
			margin-bottom: 8rpx;
		}
		.scroll-view-item_H {
			display: inline-block;
			width: 140rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 12rpx;
		}
		.scroll-view-item_selected{
			border-bottom: 2px solid red;
		}
	
	.uni-search-box {
		background-color: #FFFFFF;
		height: 50px;
		width: 580rpx;
	}
	.uni-margin-wrap{
		margin-top: 5rpx;
	}
	.swiper{
		height: 315rpx;
	}
	.swiper-item{
		width: 750rpx;
		height: 315rpx;
	}
	.uni-bg-red{
		background-color: red;
	}
	.uni-bg-green{
		background-color: green;
	}
	.uni-bg-blue{
		background-color: blue;
	}
		.uni-margin-wrap{
			margin-top: 5rpx;
		}
		.swiper{
			height: 315rpx;
		}
		.banner-image {
			width: 750rpx;
			height: 315rpx;
		}
			.classify_wrap {
				width: 750rpx;
				display: flex;
				flex-direction: row;
			}
			.classify_scroll_x{
				white-space: nowrap;
				width: 650rpx;
				background-color: #FFFFFF;
				margin-top: 5rpx;
				margin-bottom: 8rpx;
			}
			.classify_icon{
				display: flex;
				flex: 1;
				background-color: #FFFFFF;
				margin-left: 3rpx;
				margin-top: 5rpx;
				margin-bottom: 8rpx;
			}
			.segmented-wrap{
				width: 1300rpx;
			}
				.grid-item-box {
					text-align: center;
					justify-content: center;
					padding: 20rpx 0 0 0;
				}
				.grid-item-box image{
					margin: 0 auto;
				}
</style>
